<template>
	<div>
		<Modal :title="title" v-model="visible" width="920" :footer-hide="true" @on-cancel="visible = false">
			<Card>
				<Row><Table :loading="loading" border :columns="columns" :data="commentData" sortable="custom" ref="table"></Table></Row>
			</Card>
		</Modal>
		
		<Modal title="回复评论" v-model="replyVisible" width="920" :footer-hide="true" @on-cancel="replyVisible = false">
			<Card>
				<Row><Table border :columns="replyColumns" :data="replyData" sortable="custom" ref="table"></Table></Row>
			</Card>
		</Modal>
	</div>
</template>

<script>
import { getNewProductDetail } from '@/api/index'
export default {
	name: 'post',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object
		}
	},
	data() {
		return {
			visible: this.value,
			replyVisible: false,
			title: '',
			submitLoading: false,
			loading: false,
			maxHeight: 510,
			form: {},
			columns: [
				{
					title: '评论人头像',
					key: 'avatar',
					minWidth: 120,
					render: (h, params) => {
					  return h("Avatar", {
					    props: {
					      src: params.row.avatar,
					    },
					  });
					},
				},
				{
					title: '评论人昵称',
					key: 'userName',
					minWidth: 180
				},
				{
					title: '评论内容',
					key: 'content',
					minWidth: 180
				},
				{
					title: '评论时间',
					key: 'createTime',
					minWidth: 180
				},
				{
				  title: "操作",
				  key: "action",
				  width: 170,
				  align: "center",
				  fixed: "right",
				  render: (h, params) => {
				    return h("div", [
				      h(
				        "a",
				        {
				          on: {
				            click: () => {
				              this.reply(params.row);
				            },
				          },
				        },
				        "查看回复评论"
				      )
				    ]);
				  },
				},
			],
			commentData: [],
			replyData: [],
			replyColumns: [
				{
					title: '回复人头像',
					key: 'replyAvatar',
					minWidth: 120,
					render: (h, params) => {
					  return h("Avatar", {
					    props: {
					      src: params.row.replyAvatar,
					    },
					  });
					},
				},
				{
					title: '回复人昵称',
					key: 'replyUserName',
					minWidth: 180
				},
				{
					title: '评论内容',
					key: 'content',
					minWidth: 180
				},
				{
					title: '评论时间',
					key: 'createTime',
					minWidth: 180
				}
			]
		};
	},
	methods: {
		setCurrentValue(value) {
			// console.log(this.form)
			if (value === this.visible) {
				return;
			}
			this.title = '查看评论';
			getNewProductDetail({id: this.data.id}).then(res => {
				if (res.success) {
					this.commentData = res.result.commentGoodVos;
				} else {
					this.commentData = []
				}
			})
			this.visible = value;
		},
		
		reply(v) {
			if (v.commentReply === null) {
				this.$Message.warning('没有回复评论！');
				return
			}
			this.replyData = v.commentReply;
			this.replyVisible = true;
		}
	},
	watch: {
		value(val) {
			this.setCurrentValue(val);
		},
		visible(value) {
			this.$emit('input', value);
		}
	},
	mounted() {
		// this.init();
	}
};
</script>

<style lang="less">
@import '../../../styles/drawer-common.less';
</style>
